<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<style>
  li {
    list-style: none;
  }
  .box {
    width: 800px;
    height: 200px;
    border: 1px solid red;
    margin:  auto;
    overflow: hidden;

  }

  ul {
    width: 2000px;
    height: 200px;
    margin: 0;
    padding: 0;
    background-color: aqua;
    /* overflow: hidden; */
    border: 1px solid #000;
  }

  ul>li {
    float: left;
  }

  ul>li>span>img {
    width: 400px;
    height: 200px;
  }
</style>
<body>
  <script>
$(function(){

var timer = null
var toLeft = 0  
function autoPlay(){
  timer = setInterval(()=>{
    toLeft +=-10
    if(toLeft<=-1200){
     toLeft = 0
    }
    $("ul").css("marginLeft",toLeft)
  },50)

}
autoPlay()

$("ul>li").hover(function(){
clearInterval(timer)
$(this).siblings().fadeTo(1000,0.5)
$(this).stop().fadeTo(1000,1)

},function(){
  autoPlay()
  $("ul>li").stop().fadeTo(1000,1)
})


})



  </script>



<div class="box">

<ul>
   <li>
     <span>
         <img src="http://img.netbian.com/file/2021/0427/small267fc2f785d7ac881430ff3c8a2c5a951619538038.jpg" alt="">
     </span>
   </li>
   <li>
    <span>
        <img src="http://img.netbian.com/file/2021/0426/smallcfbe288cf327e02e500f979bdfaf90781619446168.jpg" alt="">
    </span>
  </li>
  <li>
    <span>
        <img src="http://img.netbian.com/file/2021/0425/small95742d8ff5b8e1c0110e75303e9692e91619361366.jpg" alt="">
    </span>
  </li>
  <li>
    <span>
        <img src="http://img.netbian.com/file/2021/0427/small267fc2f785d7ac881430ff3c8a2c5a951619538038.jpg" alt="">
    </span>
  </li>
  <li>
    <span>
        <img src="http://img.netbian.com/file/2021/0426/smallcfbe288cf327e02e500f979bdfaf90781619446168.jpg" alt="">
    </span>
  </li>



</ul>



</div>
</body>
</html>